import { defineComponent, VNode, PropType, ref } from 'vue';
/* hooks */
import { useDialog } from "@hooks/useDialog";
import i18n from '@src/locales'
/* utils */
import { openAccurateTab } from '@src/util/platform'
/* type */
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'

export default defineComponent({
    name: 'CreateQualityDialog',
    props: {

    },
    setup(props, { emit, expose }) {
        const formRef = ref<HTMLDivElement | null>(null)
        // robotType 1表示图片质检 2表示语言质检 3表示语义质检
        const modelForm = ref({
            robotName: '',
            robotType: 1,
            robotDesc: ''
        })
        const modelFormRules = ref({
            robotName: [
                { required: true, message: '机器人名称不能为空', trigger: 'blur' }
            ],
            robotType: [
                { required: true, message: '机器人类型不能为空', trigger: 'blur' }
            ]
        });
        const { visible, showDialog, hideDialog } = useDialog()

        const clearDialog = () => {
            hideDialog()
            modelForm.value = {
                robotName: '',
                robotType: 1,
                robotDesc: ''
            }
            if (formRef.value) {
                (formRef.value as any).resetFields()
            }
        }
        /**
        * @des 相关生成modal的对应的attrs
        * @returns {any}
        */
        const getModalAttrs = () => {
            return {
                props: {
                    class: "create-robot-modal",
                    width: '500px',
                    title: '新建质检机器人',
                    show: visible.value,
                    appendToBody: true
                },
                on: {
                    'update:show': (value: boolean) => {
                        visible.value = value
                        emit('updateModalValue', value)
                    }
                }
            }
        }
        const handleConfirm = () => {
            (formRef.value as any).validate((valid: boolean) => {
                if (valid) {
                      let fromId = window?.frameElement?.getAttribute('id')
                      // 临时先这样
                      openAccurateTab({
                        type: PageRoutesTypeEnum.IntelligentQualityCreate,
                        params: `name=${modelForm.value.robotName}&desc=${modelForm.value.robotDesc}`,
                        fromId
                      })
                    clearDialog();
                } else {
                    console.error('表单验证失败');
                }
            });
        };



        expose({showDialog, hideDialog, modelForm})

        return () => (
            <base-modal {...getModalAttrs()} onCancel={() => clearDialog()}>
                <el-form ref={formRef} class="create-robot-form" {...{
                    props: {
                        'model': modelForm.value
                    }
                }} label-position={'top'} rules={modelFormRules.value}>
                    <el-form-item label={'机器人名称'} prop="robotName">
                        <el-input value={modelForm.value.robotName} onInput={(e) => modelForm.value.robotName = e} maxlength="50"></el-input>
                    </el-form-item>
                    <el-form-item label={'类型'} prop="robotType">
                        <el-radio-group value={modelForm.value.robotType} onInput={(e) => modelForm.value.robotType = e}>
                            <el-radio label={1}>图片质检</el-radio>
                            <el-radio label={2} disabled>语音质检</el-radio>
                            <el-radio label={3} disabled>语义质检</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label={'说明'} prop="robotDesc">
                        <el-input type="textarea" value={modelForm.value.robotDesc} onInput={(e) => modelForm.value.robotDesc = e}></el-input>
                    </el-form-item>
                </el-form>
                <div slot={'footer'}>
                    <el-button type={'plain-third'} onClick={() => clearDialog()}>取消</el-button>
                    <el-button type={'primary'} onClick={() => handleConfirm()}>确认</el-button>
                </div>
            </base-modal>
        ) as unknown as VNode
    }
})

